<template>
    <div class="app-container">
        <div class="filter-container">
            <div style="width: 100%">
                <el-alert title="示例：20,30,40,50  金额单位是元" type="warning" style="width: 500px"></el-alert>
            </div>
            <div style="width: 100%">
                <el-input
                    v-model="str"
                    placeholder="请输入按钮金额，以英文,号分隔"
                    style="width: 500px;margin-right: 20px;margin-top: 30px"
                    class="filter-item"
                />
            </div>
            <el-button class="filter-item" type="primary" style="margin-top: 30px" @click="confirm">
                {{ $t('table.confirm') }}
            </el-button>
        </div>
    </div>
</template>

<script>
    import { getMoneyBtn, setMoneyBtn } from '@/api/wx-front'

    export default {
        data() {
            return {
                str: ''
            }
        },

        methods: {
            async confirm() {
                if (!this.str) {
                    this.$message({
                        message: '请输入金额',
                        type: 'warning'
                    })
                    return
                }

                const res = this.str.split(',')
                const arr = []

                for(let i of res) {
                    const item = Number(i)

                    if (isNaN(item)) {
                        this.$message({
                            message: '输入金额格式错误',
                            type: 'warning'
                        })
                        return
                    }

                    arr.push(item * 100)
                }

                const { code } = await setMoneyBtn({
                    pricelist: arr.join(',')
                })

                if (code === 200) {
                    this.$message.success('设置成功')
                }
            }
        },

        async mounted() {
            const { data: { list } } = await getMoneyBtn()

            if (list && list.length) {
                this.str = list.map(({ cent }) => (cent / 100).toFixed(2)).join(',')
            }
        }
    }
</script>
